<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="../static/layui/css/layui.css">
	<script src="../static/layui/layui.js"></script>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Inventory Management System</title>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo "><i class="layui-icon layui-icon-cart"></i>Inventory Management</div>
            <!-- Header area (can be used with the existing horizontal navigation of layui) -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item" ><a href="/index/"><i class="layui-icon layui-icon-table"></i>Goods Management</a></li>
                <li class="layui-nav-item"><a href="/count/"><i class="layui-icon layui-icon-rmb"></i>Budget statistics</a></li>
                <li class="layui-nav-item"><a href="/other/"><i class="layui-icon layui-icon-time"></i>Stock Records</a></li>
                <li class="layui-nav-item"><a href="/notifications/"><i class="layui-icon layui-icon-notice"></i>Notification</a></li>
                {% if session.get('role') == 'super_admin' %}
                <li class="layui-nav-item"><a href="/admin/manage_users"><i class="layui-icon layui-icon-set"></i>Manage Users</a></li>
                {% endif %}
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="/logout" class="layui-btn layui-btn-danger">Logout</a>
                </li>
            </ul>
        </div>

        <div style="padding: 5%;">
            <!-- Main content area -->
            <div class="layui-fluid">
                <div class="demoTable">
                    <i class="layui-icon layui-icon-search"></i>
{#                    Product Category:#}
{#                    <div class="layui-form layui-input-inline">#}
{#                        <select id="search_type" name="search_type" lay-filter = "search_type">#}
{#                            <option value="">Please select</option>#}
{#                            <option value="Incentive Ring">Incentive Ring</option>#}
{#                            <option value="Housing">Housing</option>#}
{#                            <option value="Tool">Tool</option>#}
{#                            <option value="Other">Other</option>#}
{#                        </select>#}
{#                    </div>#}
{#                    Workpiece Process:#}
{#                    <div class="layui-form layui-input-inline">#}
{#                        <select id="search_process" name="search_process" >#}
{#                        </select>#}
{#                    </div>#}
                    Search Product Name:
                    <div class="layui-inline">
                        <input class="layui-input" name="search_name" id="search_name" autocomplete="off">
                    </div>
                    Search Model:
                    <div class="layui-inline">
                        <input class="layui-input" name="search_model" id="search_model" autocomplete="off">
                    </div>
                    <button type="button" class="layui-btn" id="searchbt" data-type="reload">Search</button>
                    <button type="button" class="layui-btn" id="addbt" style="float: right;"><i class="layui-icon">&#xe608;</i> Add Inventory Category</button>
                </div>
            </div>
            <table class="layui-hide" id="goods" lay-filter="goods"></table>

            <script type="text/html" id="toolbarDemo"></script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">Edit</a>
                <a class="layui-btn layui-btn-xs" lay-event="out"> Out</a>
                <a class="layui-btn layui-btn-xs" lay-event="in">  In </a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> Del</a>
            </script>
        </div>
        <script type="text/html" id="edit_html">
            <form class="layui-form" id="edit_form">
                <div style="padding: 3%;">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-inline">
                      <input type="text" name="edit_id" id="edit_id" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Name</label>
                    <div class="layui-input-inline">
                      <input type="text" name="edit_name" id="edit_name" lay-verify="required"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Model</label>
                    <div class="layui-input-inline">
                      <input type="text" name="edit_model" id="edit_model" lay-verify="required"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Factory</label>
                    <div class="layui-input-inline">
                      <input type="text" name="edit_factory" id="edit_factory"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Price</label>
                    <div class="layui-input-inline">
                      <input type="text" name="edit_price" id="edit_price" lay-verify="required|number" class="layui-input">
                    </div>
                </div>
				<div class="layui-form-item">
				    <label class="layui-form-label">Safe Number</label>
				    <div class="layui-input-inline">
				      <input type="text" name="edit_safenumber" id="edit_safenumber"  class="layui-input">
				    </div>
				</div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="edit_submit" >Submit</button>
                    </div>
                </div>
            </form>
        </script>
        <script type="text/html" id="in_html">
            <form class="layui-form"  id="in_form">
                <div style="padding: 3%;"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-inline">
                      <input type="text" name="in_id" id="in_id" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Name</label>
                    <div class="layui-input-inline">
                      <input type="text" id="in_name" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Model</label>
                    <div class="layui-input-inline">
                      <input type="text"  id="in_model" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
{#                <div class="layui-form-item">#}
{#                    <label class="layui-form-label">工序</label>#}
{#                    <div class="layui-input-inline">#}
{#                      <input type="text"  id="in_process" lay-verify="required" readonly="true" class="layui-input">#}
{#                    </div>#}
{#                </div>#}
                <div class="layui-form-item">
                    <label class="layui-form-label">Factory</label>
                    <div class="layui-input-inline">
                      <input type="text"  id="in_factory" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Number</label>
                    <div class="layui-input-inline">
                      <input type="text" name="in_change" lay-verify="required|number" placeholder="Please enter the Inbound quantity" class="layui-input" autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item">
                	<label class="layui-form-label">Operator</label>
                	<div class="layui-input-inline">
                	  <select id ="in_people"  name="in_people" lay-verify="required">

                	  </select>
                	</div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="in_submit">Submit</button>
                    </div>
                </div>
            </form>
        </script>
        <script type="text/html" id="out_html">
            <form class="layui-form" id="out_form">
                <div style="padding: 3%;"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-inline">
                      <input type="text" name="out_id" id="out_id" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Name</label>
                    <div class="layui-input-inline">
                      <input type="text" id="out_name" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Model</label>
                    <div class="layui-input-inline">
                      <input type="text" id="out_model" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">工序</label>
                    <div class="layui-input-inline">
                      <input type="text"  id="out_process" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Factory</label>
                    <div class="layui-input-inline">
                      <input type="text"  id="out_factory" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Current inventory</label>
                    <div class="layui-input-inline">
                      <input type="text"  id="out_number" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Outbound Number</label>
                    <div class="layui-input-inline">
                      <input type="text" name="out_change" lay-verify="required|number|bigger|more" placeholder="Please output the number of libraries" class="layui-input" autocomplete="off">
                    </div>
                </div>

				<div class="layui-form-item">
					<label class="layui-form-label">Operator</label>
					<div class="layui-input-inline">
					  <select id ="out_people"  name="out_people" lay-verify="required">

					  </select>
					</div>
				</div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="out_submit" >Submit</button>
                    </div>
                </div>
            </form>
        </script>
        <script type="text/html" id="del_html">
            <form class="layui-form"  id="del_form">
                <div style="padding: 3%;"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-inline">
                      <input type="text" name="del_id" id="del_id" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Name</label>
                    <div class="layui-input-inline">
                      <input type="text" id="del_name"  lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Model</label>
                    <div class="layui-input-inline">
                      <input type="text"  id="del_model" lay-verify="required" readonly="true" class="layui-input">
                    </div>
                </div>
{#                <div class="layui-form-item">#}
{#                    <label class="layui-form-label">工序</label>#}
{#                    <div class="layui-input-inline">#}
{#                      <input type="text"  id="del_process" lay-verify="required" readonly="true" class="layui-input">#}
{#                    </div>#}
{#                </div>#}
                <div class="layui-form-item">
                    <label class="layui-form-label">Factory</label>
                    <div class="layui-input-inline">
                      <input type="text" id="del_factory" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Number</label>
                    <div class="layui-input-inline">
                      <input type="text"  id="del_number" lay-verify="zero" readonly="true" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="del_submit">Confirm Deletion</button>
                    </div>
                </div>
            </form>
        </script>
        <script type="text/html" id="add_html">
            <form class="layui-form"  id="add_form">
                <div style="padding: 3%;"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Name</label>
                    <div class="layui-input-inline">
                      <input type="text" name="add_name"  lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Model</label>
                    <div class="layui-input-inline">
                      <input type="text" name="add_model" lay-verify="required" class="layui-input">
                    </div>
                </div>
{#                <div class="layui-form-item">#}
{#                    <label class="layui-form-label">产品种类</label>#}
{#                    <div class="layui-input-inline">#}
{#                        <select id ="add_type" name="add_type" lay-verify="required" lay-filter ="add_type">#}
{#                            <option value="">请选择</option>#}
{#							<option value="激励环">激励环</option>#}
{#							<option value="壳体">壳体</option>#}
{#							<option value="工具">工具</option>#}
{#							<option value="其它">其它</option>#}
{#                        </select>#}
{#                    </div>#}
{#                </div>#}
{#				<div class="layui-form-item">#}
{#				    <label class="layui-form-label">工件工序</label>#}
{#				    <div class="layui-input-inline">#}
{#				        <select id ="add_process" name="add_process" lay-verify="required">#}
{##}
{#				        </select>#}
{#				    </div>#}
{#				</div>#}
                <div class="layui-form-item">
                    <label class="layui-form-label">Factory</label>
                    <div class="layui-input-inline">
                      <input type="text" name="add_factory"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Price</label>
                    <div class="layui-input-inline">
                      <input type="text" name="add_price"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="add_submit">Submit</button>
                    </div>
                </div>
            </form>
        </script>
	</div>
	<script>
		layui.use(['table','form','layer'], function () {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var $ = layui.jquery;

			var get_names = function(name, htmlID) {
					$.get("/data/" + ("?", (name)), function(d) {
						var list = d.data;
						var names = "<option ></option>"
						for (var i = 0; i < list.length; i++) {
							if (Object.keys(list[i])[0] == "id") {
								names += "<option >" + Object.values(list[i])[1] + "</option>"
							} else {
								names += "<option >" + Object.values(list[i])[0] + "</option>"
							}
						}
						$("#" + ("?", htmlID)).html(names);
						form.render();
					});
				}

			table.render({
				elem: '#goods'
				, url:'/data/goods/'
				, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
				, defaultToolbar: ['filter', 'exports', 'print']
				, title: 'Inventory information'
				,initSort: {
                    field: 'needbuy' //排序字段，对应 cols 设定的各字段名
                    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                  }
				, cols: [[
					{ field: 'id', title: 'ID', width: 60, fixed: 'left'},
                    { field: 'name', title: 'Name', width: 120 , sort: true },
                    { field: 'model', title: 'Model', width: 80 },
                    { field: 'factory', title: 'Factory', width: 180, sort: true},
                    { field: 'price', title: 'Price', width: 80},
                    { field: 'number', title: 'Number', width: 80},
                    { field: 'safenumber', title: 'Safe Number', width: 120},
                    { field: 'needbuy', title: 'Need', width: 120},
                    { fixed: 'right', title: '', toolbar: '#barDemo', width: 220 }
				]]
                ,id: 'goods_tablerender'
				,page: false
                ,skin: 'row'
                ,even: true
                ,height: 'full-160'
                ,done:function(res,curr,count){
                // 获取已经弹出过警告的商品 ID 数组
                var warnedIds = JSON.parse(localStorage.getItem('warnedGoodsIds')) || [];
                //layui.table.cache['goods_tablerender']获取表格中的数据，完成排序的返回排完序后的数据
                for(var i in layui.table.cache['goods_tablerender']){
                    var ID = layui.table.cache['goods_tablerender'][i];
                    if(ID.number < ID.safenumber){
                        // 改变整行颜色为红色
                        $("tr[data-index='" + i + "']").css("background-color","red");
                        // 改变整行字体颜色为白色
                        $("tr[data-index='" + i + "']").css("color","white");
                        // 检查该商品是否已经弹出过警告
                        if (!warnedIds.includes(ID.id)) {
                            layer.confirm("Warning:"+ID.model+"  The quantity is too low. Please replenish the stock in time",function(index){
                                layer.close(index);
                            });
                            // 将该商品 ID 添加到已警告数组中
                            warnedIds.push(ID.id);
                            // 更新 localStorage 中的已警告商品 ID 数组
                            localStorage.setItem('warnedGoodsIds', JSON.stringify(warnedIds));
                        }
                    }
                }
            },
			});


			//监听行工具事件
			table.on('tool(goods)', function (obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'del') {
					layer.open({
                        type: 1,
                        area: ['380px', '450px'],
                        title:["Delete",'font-size:25px;'],
                        content:$("#del_html").html(),
						zIndex: layer.zIndex //重点1
						        ,
                        success:function () {
                            $("#del_id").val(data.id)
                            $("#del_name").val(data.name)
                            $("#del_model").val(data.model)
                            $("#del_type").val(data.type)
							$("#del_process").val(data.process)
                            $("#del_factory").val(data.factory)
                            $("#del_number").val(data.number)
                        }
                    })
				} else if (obj.event === 'in') {
					layer.open({
                        type: 1,
                        area: ['380px', '500px'],
                        title:["Inbound",'font-size:25px;'],
                        content:$("#in_html").html(),
                        success:function () {
                            $("#in_id").val(data.id)
                            $("#in_name").val(data.name)
                            $("#in_model").val(data.model)
                            $("#in_factory").val(data.factory)
                            $("#in_type").val(data.type)
							$("#in_process").val(data.process)
                            get_names("operator_names","in_people");
                            form.render();
                        }
                    })
				}else if (obj.event === 'out') {
					layer.open({
                        type: 1,
                        area: ['380px', '550px'],
                        title:["Outbound",'font-size:25px;'],
                        content:$("#out_html").html(),
                        success:function () {
                            $("#out_id").val(data.id)
                            $("#out_name").val(data.name)
                            $("#out_model").val(data.model)
                            $("#out_factory").val(data.factory)
                            $("#out_type").val(data.type)
							$("#out_process").val(data.process)
                            $("#out_number").val(data.number)
							get_names("operator_names","out_people");
                            form.render()
                        }
                    })
				}else if (obj.event ==='edit') {
				    layer.open({
                        type: 1,
                        area: ['380px', '580px'],
                        title:["Edit inventory information",'font-size:25px;'],
                        content:$("#edit_html").html(),
                        success:function () {
                            $("#edit_id").val(data.id)
                            $("#edit_name").val(data.name)
                            $("#edit_model").val(data.model)
                            $("#edit_factory").val(data.factory)
                            $("#edit_type").val(data.type)
							$("#edit_process").val(data.process)
                            $("#edit_price").val(data.price)
							$("#edit_safenumber").val(data.safenumber)

                            form.render()
                        }
                    })
                }
			});
			var active = {
                reload: function(){
                    var search_process = $('#search_process');
                    var search_name = $('#search_name');
                    var search_model = $('#search_model');
                    //执行重载
                    table.reload('goods_tablerender', {
<!--                        page: {-->
<!--                            curr: 1 //重新从第 1 页开始-->
<!--                        },-->
                        where: {
                            search_process: search_process.val(),
                            search_name:search_name.val(),
                            search_model: search_model.val()
                        }
                  }, 'data');
                }
            };



            form.on('select(search_type)', function() {
					if ($("#search_type").val() == "激励环") {
						get_names("jlh_processes_names", "search_process");

					} else if ($("#search_type").val() == "壳体") {
						get_names("kt_processes_names", "search_process")
					} else if ($("#search_type").val() == "工具") {
						get_names("tool_names", "search_process")
					} else if ($("#search_type").val() == "其它") {
						get_names("other_names", "search_process")
					} else {
						layer.msg("种类未选中")
					}
				});
			form.on('select(add_type)', function() {
					if ($("#add_type").val() == "激励环") {
						get_names("jlh_processes_names", "add_process");
					} else if ($("#add_type").val() == "壳体") {
						get_names("kt_processes_names", "add_process")
					} else if ($("#add_type").val() == "工具") {
						get_names("tool_names", "add_process")
					} else if ($("#add_type").val() == "其它") {
						get_names("other_names", "add_process")
					} else {
						layer.msg("种类未选中")
					}
				});
			form.on('select(edit_type)', function() {
					if ($("#edit_type").val() == "激励环") {
						get_names("jlh_processes_names", "edit_process");
					} else if ($("#edit_type").val() == "壳体") {
						get_names("kt_processes_names", "edit_process")
					} else if ($("#edit_type").val() == "工具") {
						get_names("tool_names", "edit_process")
					} else if ($("#edit_type").val() == "其它") {
						get_names("other_names", "edit_process")
					} else {
						layer.msg("种类未选中")
					}
				});

            $('#searchbt').on('click', function(){var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('#addbt').on('click', function(){
                layer.open({
                        type: 1,
                        area: ['380px', '500px'],
                        title:['Add inventory category','font-size:25px;'],
                        content:$("#add_html").html(),
                        success:function(){
                            form.render();
						}
                    })
            });
            form.verify({
              zero: [
                /^[0.]+$/
                ,'There is still stock available. Please delete it after taking it out of the warehouse!'
              ],
              bigger:[
                  /^[1-9]+[0-9]*$/
                ,'The quantity of goods entering and leaving the warehouse must be greater than 0!'
              ],
              more:function (value){ //value：表单的值、item：表单的DOM对象
                  if(Number(value)>Number($("#out_number").val())){
                      return 'The quantity of goods dispatched from the warehouse cannot exceed the current inventory!';
                  }
              }
            });
            form.on('submit(edit_submit)', function(data){
                layer.closeAll();
                $.get("/op/edit", $("#edit_form").serialize() );
                $("#searchbt").click();
                return false;
            });
            form.on('submit(add_submit)', function(data){
                layer.closeAll();
                $.get("/op/add", $("#add_form").serialize());
                $("#searchbt").click();
                return false;
            });
            form.on('submit(del_submit)', function(data){
                layer.closeAll();
                $.get("/op/del", $("#del_form").serialize());
                $("#searchbt").click();
                return false;
            });
            form.on('submit(in_submit)', function(data){
                layer.closeAll();
                $.get("/op/in", $("#in_form").serialize());
                $("#searchbt").click();
                return false;
            });
            form.on('submit(out_submit)', function(data){
                layer.closeAll();
                $.get("/op/out",  $("#out_form").serialize());
                $("#searchbt").click();
                return false;
            });
		});

	</script>
</body>
</html>
